<div class="paging">
    <div class="paging_pre" on:click={()=>{paging(activeIndex-1)}}>
        👈🏻	
    </div>
    <div class="pageIndex">{activeIndex}</div>
    <div class="paging_next" on:click={()=>{paging(activeIndex+1)}}>
        👉🏻
    </div>
</div>
<script>
    export let activeIndex = 1;
    import { createEventDispatcher } from 'svelte';
    const dispatch = createEventDispatcher();
    function paging(index){
        if(index<=0){
			return;
		}
        dispatch("onPaging",index)
    }
</script>
<style>
    .paging{
	padding: 3rem 0px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 2rem 0px;
    }
    .paging_pre,.paging_next{
        margin: 0px 2rem;
        height: 4.5rem;
        width: 4.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgb(255, 255, 255);
        border-radius: 1rem;
        font-size: 2rem;
        user-select: none;
    }
    .pageIndex{
        font-size: 2rem;
    }

</style>